<template>
  <div>
    <!-- 外框 -->
    <el-row :gutter="5" style="border: 1px solid red;">
      <!-- 新增信息按钮 -->
      <el-col :span="14" style="line-height: 20px;text-align: left;">
        <el-button size="medium" @click="addFormVisible=true" type="primary">新增</el-button>
      </el-col>
      <!-- 修改图片按钮 -->
      <el-col :span="10" style="line-height: 20px;text-align: left;">
          <el-button size="medium" @click="check" type="primary">修改/上传</el-button>
      </el-col>
      <!-- 联系电话区 -->
      <el-col :span="14">
        <el-row style="border: 1px solid blue;">
          <el-table :data="pageInfo.list" style="width: 100%" @cell-click="showImg">
            <el-table-column label="名称" width="200">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column label="电话" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.phone}}</span>
              </template>
            </el-table-column>
            <el-table-column label="地址" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.address }}</span>
              </template>
            </el-table-column>
            <el-table-column label="类型" width="70">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.type }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row);updateFormVisible = true">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <!-- 分页功能 -->
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="[2,3,4]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
          </el-pagination>
        </div>
      </el-col>
      <!-- 新增用户的隐藏对话框 -->
      <div>
      	<el-dialog title="更换图片" :visible.sync="addFormVisible" width="500px">
      		<el-form :model="addform">
      			<el-form-item label="名字" label-width="100px">
      				<el-input v-model="addform.name" autocomplete="off"></el-input>
      			</el-form-item>
      			<el-form-item label="联系电话" label-width="100px">
      				<el-input v-model="addform.phone" autocomplete="off"></el-input>
      			</el-form-item>
            <el-form-item label="地址" label-width="100px">
            	<el-input v-model="addform.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="类型" label-width="100px">
            	<el-input v-model="addform.type" autocomplete="off"></el-input>
            </el-form-item>
      		</el-form>
      		<div slot="footer" class="dialog-footer">
      			<el-button @click="addFormVisible = false;addform={}">取 消</el-button>
      			<el-button type="primary" @click="add">确 定</el-button>
      		</div>
      	</el-dialog>
      </div>
      <!-- 编辑用户的隐藏对话框 -->
      <div>
      	<el-dialog title="修改用户信息" :visible.sync="updateFormVisible">
      		<el-form :model="updateform">
      			<el-form-item label="姓名" label-width="60px">
      				<el-input v-model="updateform.name" autocomplete="off"></el-input>
      			</el-form-item>
      			<el-form-item label="电话" label-width="60px">
      				<el-input v-model="updateform.phone" autocomplete="off"></el-input>
      			</el-form-item>
            <el-form-item label="地址" label-width="60px">
            	<el-input v-model="updateform.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="类型" label-width="60px">
            	<el-input v-model="updateform.type" autocomplete="off"></el-input>
            </el-form-item>
      		</el-form>
      		<div slot="footer" class="dialog-footer">
      			<el-button @click="updateFormVisible = false;">取 消</el-button>
      			<el-button type="primary" @click="update()">确 定</el-button>
      		</div>
      	</el-dialog>
      </div>
      <!-- 更换图片对话框 -->
      <div>
      	<el-dialog title="更换图片" :visible.sync="updateImgFormVisible" width="500px">
      	<el-upload
      	  class="upload-demo"
      	  action="http://localhost:8080/epidemic_special_things/getImageUrl"
      	  :on-preview="handlePreview"
      	  :on-remove="handleRemove"
      	  :file-list="fileList"
          :limit="2"
      	  list-type="picture">
      	  <el-button size="small" type="primary">点击上传(上传后选择想要的图片)</el-button>
      	  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      	</el-upload>
      	</el-dialog>
      </div>
      <!-- 图片展示区 -->
      <el-col :span="10">
        <el-row style="border: 1px solid blue;" class="infinite-list">
          <div class="demo-image__placeholder">
            <div class="block">
              <el-image  :src="img" style="width: 500px;height: 300px;" fit="fill">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
                <el-image></el-image>
              </el-image>
            </div>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //编辑功能隐藏框
        updateFormVisible:false,
        updateform:{
          name:'',
          phone:'',
          type:'',
          adress:'',
        },
        //更改头像隐藏框
        updateImgFormVisible:false,
        //上传图片
        fileList: [],
        //新增表单数据
        addform:{
          name:'',
          phone:'',
          type:'',
          adress:'',
        },
        addFormVisible:false,
        //当前页码
        currentPage: 1,
        //每页显示的条数
        pageSize: 2,
        //表格数据
        pageInfo: {},
        //展示区图片
        img: '',
        //展示图片时该图片的信息id
        imgID:NaN
      }
    },
    methods: {
      //点击更改按钮，检查是否未选定
      check(){
        if(!(this.imgID)){
          this.$message("请选择修改哪个事务处的图片")
        }else{
          this.updateImgFormVisible=true;
        }
      },
      //上传图片操作
      handleRemove(file, fileList) {
              console.log("111",file, fileList);
            },
      handlePreview(file) {
        console.log(file);
        console.log(file.url);
        this.img=file.url;
        console.log(this.img);
        this.updateImgFormVisible = false;
        // this.fileList={};
        //发送ajax
          this.$axios.post("http://localhost:8080/epidemic_special_things/"+this.imgID
          ).then(res => {
          	this.$message(res.data.msg);
            this.updateImgFormVisible = false;
          	this.getEpidemic_Specical_ThingsList();
          })
        // https://gulixueyuan001.oss-cn-beijing.aliyuncs.com/2022/11/26/268ceb9a68804131b40422b4c891a3e03.jpg
        // https://guliedu-20221028.oss-cn-hangzhou.aliyuncs.com/2022/10/29/d0012d5d15c438712a6696c6cb034d3c.jpg
      },
      //添加操作
      add(){
        //发送ajax
        this.$axios.post("http://localhost:8080/epidemic_special_things", this.addform).then(res => {
        	this.$message(res.data.msg);
          this.addform = {};
          this.addFormVisible = false;
        	this.getEpidemic_Specical_ThingsList();
          this.$message('请继续在右侧点击上传图片');
        })
      },
      //编辑用户功能
      update() {
      	//发送ajax
      	this.axios.put("http://localhost:8080/epidemic_special_things", this.updateform).then(res => {
      		this.$message(res.data.msg);
      		this.getEpidemic_Specical_ThingsList();
      		this.updateFormVisible = false;
      	})
      },
      //编辑操作
      handleEdit(index, row) {
        console.log(index, row);
         this.updateform = {
          ...row
         }
      },
      //删除操作
      handleDelete(index, row) {
        	console.log(index, row);
        	this.$confirm('此操作会删除词条数据, 是否继续?', '提示', {
        		confirmButtonText: '确定',
        		cancelButtonText: '取消',
        		type: 'warning'
        	}).then(() => {
        		//发送ajax
        		this.$axios.delete("http://localhost:8080/epidemic_special_things/" +row.id).then(res => {
              console.log(res.data.code);
        			if (res.data.code == 200) {
                console.log(res.data);
        				this.$message({
        					type: 'success',
        					message: res.data.msg
        				});
        			}else{
        				this.$message({
        					type: 'error',
        					message: res.data.msg
        				});
        			}
        			this.getEpidemic_Specical_ThingsList();
        		})
        	}).catch(() => {
        		this.$message({
        			type: 'info',
        			message: '已取消删除'
        		});
        	});
      },
      //点击表格，换展示图片
      showImg(data) {
        console.log(data.img)
        console.log(data.id)
        this.imgID=data.id;
        this.img=data.img;
      },
      //分页查询方法
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getEpidemic_Specical_ThingsList();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.getEpidemic_Specical_ThingsList();
      },
      //获取数据库数据方法
      getEpidemic_Specical_ThingsList() {
        this.$axios.get("http://localhost:8080/epidemic_special_things" + "/" + this.currentPage + "/" + this.pageSize).then(res => {
          console.log(res.data);
          this.pageInfo = res.data.data;
        })
      },
    },
    created() {
      this.getEpidemic_Specical_ThingsList();
    },
  }
</script>

<style>
  .el-table__header-wrapper {
    line-height: 20px
  }
  .el-dialog{
    line-height: 20px
  }
</style>
